/* 
Origin color: #e67e22
*/


/* ---------------------------------------------- */
/* BASIC SETUP */
/* ---------------------------------------------- */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;              /*让宽高的设置是box的实际值 = content + padding + border*/
}

html,
body {
    background-color: #ffffff;
    color: #555555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;         /*繪制文本時易讀性優先，會啟用字距調整和連字*/
    overflow-x: hidden;
}


/* ---------------------------------------------- */
/* REMOVE FLOAT */
/* ---------------------------------------------- */
.clearfix { zoom: 1; }
.clearfix:after {
    content: '';   /* 设置内容为空 */
    clear: both;        /* 清除浮动 */
    display: block;     /* 将文本转为块级元素 */
    height: 0;      /* 高度为0 */
    visibility: hidden;     /* 将元素隐藏 */
}

/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */

.row {
    max-width: 1140px;
    margin: 0 auto;         /*top and bottom: 0; left abd right: auto*/
}

section {
    padding: 80px 0;
}

.box {
    padding: 1%;
}


/* ------ HEADINGS ------ */
h1, h2, h3 {  
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 240%;            /*240% of 20px: 定义在全局的 html{}中的font-size*/
    word-spacing: 3px;          /*单词之间的间隔*/
    letter-spacing: 1px;        /*字母之间的间隔*/
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;  
}

h3 {
    font-size: 110%;
    margin-bottom: 15px;
    text-align: center;
}

h2:after {              /*在每个h2标签后面插入内容(content中的)*/
    display: block;
    height: 2px;
    background-color: #e67e22;
    content: " ";
    width: 100px;
    margin: 0 auto;
    margin-top: 30px;
}

/* ------ PARAGRAPH ------ */
.long-copy {
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
    text-align: center;
    /* margin-right: 15%; */
}

.box p {
    font-size: 90%;
    line-height: 145%;
}

/* ------ ICONS ------ */
.icon-big {
    font-size: 350%;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    color: #e67e22;
}

/* ------ LINKS ------ */
a:link, 
a:visited {
    color: #e67e22;
    text-decoration: none;
    border-bottom: 1px solid #e67e22; 
    transition: border-bottom 0.5s, color 0.5s;
}

a:hover,
a:active {
    color: #555555;
    border-bottom: 1px solid transparent;
}


/* ------ BUTTONS ------ */
.btn:link,             /*:link是未被访问的链接*/
.btn:visited,
input[type=submit] {
    /*inline-block：和inline一样，但是可以定义padding和margin*/
    display: inline-block;
    padding: 10px 30px;         /*上->右->下->左*/
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
    /*transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.
    这个属性一般搭配:hover来使*/
}

.btn-full:link,
.btn-full:visited,
input[type=submit] {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #ffffff;
    margin-right: 15px;
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #e67e22;
    color: #e67e22;
}

.btn:hover,
.btn:active,
input[type=submit]:hover, 
input[type=submit]:active {
    background-color: #cd6917;          /*这个必须放在btn-full后面，否则不会生效*/
}

.btn-full:hover,
.btn-full:active {
    border: 1px solid #cd6917;
}

.btn-ghost:hover,
.btn-ghost:active {
    border: 1px solid #cd6917;
    color: #ffffff;
}

/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */

header {
    /*黑色(0, 0, 0), 70%的透明度*/
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
    /* linear-gradient(to bottom right, red , blue);   
    从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色： 
    第一个参数默认 to bottom*/

    background-size: cover;            /*把背景图片放大到适合元素容器的尺寸，图片比例不变，但是超出容器的部分可能会裁掉*/
    /* background-size: 100%;          按容器比例撑满，图片变形 */
    background-position: center;
    height: 100vh;              /*vh: 视窗的高度；vw: 视窗的宽度*/
    background-attachment: fixed;
}

.hero-text-box {
    position: absolute;
    width: 1140px;

    /*以下三个加起来是为了居中*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);        /*向左向上移动50%的宽度和高度*/
    /*translate 函数当中使用百分比是以该元素的content + padding + border为标准计算的*/
}

.logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;
}

.logo-black {
    display: none;
    height: 50px;
    width: auto;
    float: left;
    margin-top: 5px;
}

/* Main Nav */
.main-nav {
    float: right;
    list-style: none;
    margin-top: 20px;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    line-height: 100px;
}

.mobile-nav-icon {
    float: right;
    margin-top: 30px;
    cursor: pointer;
    display: none;
}

.mobile-nav-icon ion-icon {
    font-size: 200%;
    color: #ffffff;
}

/*
link：设置a对象在未被访问前的样式表属性。
visited：设置a对象在其链接地址已被访问过时的样式表属性。
hover：设置对象在其鼠标悬停时的样式表属性。
active：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
*/
.main-nav li a:link,                
.main-nav li a:visited {
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;              /*大写*/
    font-size: 90%;
    border-bottom: 2px solid transparent;           /*border是透明的，border-bottom: none;可以达到一样的效果*/
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #e67e22;
}


/* Sticky nav */
.sticky {
    position: fixed;
    top: 1;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 2px #ffffff;
    z-index: 9999;          /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 */
}

.sticky .main-nav {
    margin-top: 5px;
}
.sticky .main-nav li {
    line-height: 50px;
}


.sticky .main-nav li a:link,                
.sticky .main-nav li a:visited {
    color: #555555;
    padding: 15px 0;
}

.sticky .logo {
    display: none;
}
.sticky .logo-black {
    display: block;
}

/* ---------------------------------------------- */
/* FEATURES */
/* ---------------------------------------------- */
.section-features .long-copy {
    margin-bottom: 40px;
}


/* ---------------------------------------------- */
/* MEALS */
/* ---------------------------------------------- */
.section-meals {
    padding: 0;
}

.meals-showcase {
    list-style: none;
    width: 100%;
}

.meals-showcase li {
    display: block;
    float: left;
    width: 25%;
    
} 

.meal-photo {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000000;
}

.meal-photo img {
    width: 100%;
    height: auto;
    transform: scale(1.03);
    transition: transform 0.5s, opacity 0.5s;
    /* 
        transition: property duration timing-function delay;
            property：规定设置过渡效果的 CSS 属性的名称
            duration：规定完成过渡效果需要多少秒或毫秒
            timing-function：规定速度效果的速度曲线
            delay：定义过渡效果何时开始
    */

    opacity: 0.7;
}

.meal-photo img:hover {
    transform: scale(1.15);     /*不设置成1是为了防止缩小后的图片下面有一条白线*/
    /* transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 */

    opacity: 1;
}


/* ---------------------------------------------- */
/* HOW IT WORKS */
/* ---------------------------------------------- */
.section-steps {
    background-color: #f4f4f4;
}

.step-box:first-child {
    text-align: right;
    padding-right: 3%;
    margin-top: 30px;
}

.step-box:last-child {
    padding-left: 3%; 
    margin-top: 70px;
}

.app-screen {
    width: 40%;
}

.works-step {
    margin-bottom: 50px;
}

.works-step div {
    color: #e67e22;
    border: 2px solid #e67e22;
    border-radius: 50%;
    height: 55px;
    width: 55px;
    text-align: center;
    float: left;
    font-size: 180%;
    margin-right: 25px;
}

.works-step:last-of-type {      
    /* 这里之所以用:last-of-type是因为它 .work-step的父元素的最后一个子元素的class不是 .work-step */    
    margin-bottom: 80px;
}

/*
    p:last-child和 p:last-of-type的区别
        :last-child
            先找到p标签的父元素，然后找到父元素的最后一个子元素，如果子元素是p标签，那么选择它，否则这个选择器不起作用
        :last-of-type
            先找到p标签的父元素，然后找到父元素的最后一个p标签的子元素
*/

.btn-app:link,
:visited {
    border: 0;
}

.btn-app img {
    height: 50px;
    width: auto;
    margin-right: 10px;
}

/* ---------------------------------------------- */
/* CITIES */
/* ---------------------------------------------- */
.box img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.city-feature {
    margin-bottom: 5px;
}

.icon-small {
    color: #e67e22;
    display: inline-block;
    width: 30px;
    text-align: center;
    font-size: 120px;

    /* secrets to align text and icons */
    line-height: 120%;
    vertical-align: middle;
    
    margin-right: 10px;
}


/* ---------------------------------------------- */
/* Testimonials */
/* ---------------------------------------------- */
.section-testimonials {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("img/back-customers.jpg");
    background-size: cover;
    color: #ffffff;
    background-attachment: fixed;           /* 当页面的其余部分滚动时，背景图像不会移动 */
}

blockquote {
    padding: 2%;
    font-style: italic;
    margin-top: 40px;
}

cite {
    font-size: 90%;
    margin-top: 25px;
    display: block;
}

blockquote:before {
    content: "\201c";           /* " */
    font-size: 400%;
    display: block;
    height: 50px;
    /* position: absolute; */
    /* top: 0; */
    /* left: -3px; */
}

cite img {
    height: 45px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
}



/* ---------------------------------------------- */
/* SIGN UP */
/* ---------------------------------------------- */
.section-plans {
    background-color: #f4f4f4;
}

.plan-box {
    background-color: #ffffff;
    border-radius: 5px;
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 2px 2px #726e6e;
}

.plan-box div {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8;
}

.plan-box div:first-child {
    background-color: #fcfcfc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.plan-box div:last-child {
    text-align: center;
    border: 0;
}

.plan-price {
    font-size: 300%;
    /* font-weight: 100; */
    margin-bottom: 10px;
    color: #e67e22;
}

.plan-price span {
    font-size: 30%;     /* 30% of (300% of the html font) */
    /* font-weight: 300; */
}

.plan-price-meal {
    font-size: 80%;
}

.plan-box ul {
    list-style: none;
}

.plan-box li {
    padding: 5px 0;
}



/* ---------------------------------------------- */
/* FORM */
/* ---------------------------------------------- */
.contact-form {
    width: 60%;
    margin: 0 auto;
}

input[type=text],
input[type=email], 
select,
textarea {
    width: 100%;
    padding: 7px;
    border-radius: 6px;
    border: 1px solid #cccccc;
}

textarea {
    height: 100px;
}

input[type=checkbox] {
    margin: 10px 5px 10px 0;
}

*:focus {
    outline: none;      
    /* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 */
}


/* ---------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------- */
footer {
    background-color: #333333;
    padding: 30px;
    font-size: 80%;
}

.footer-nav,
.social-links {
    list-style: none;
}

.footer-nav {
    float: left;
}

.footer-nav li {
    display: inline-block;
    margin-right: 20px;
}

.social-links {
    float: right;
}

.social-links li {
    display: inline-block;
    margin-right: 20px; 
}

.social-links li:last-child {
    margin-right: 0px;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
    text-decoration: none;
    border: 0;
    color: #888888;
    transition: color 0.5s;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #dddddd;
}

.social-links li a:link,
.social-links li a:visited {
    font-size: 140%;
}

ion-icon[name=logo-facebook],
ion-icon[name=logo-twitter],
ion-icon[name=logo-googleplus],
ion-icon[name=logo-instagram] {
    transition: color 0.5s;
}

ion-icon[name=logo-facebook]:hover {
    color: #3b5998;
}
ion-icon[name=logo-twitter]:hover {
    color: #00aced;
}
ion-icon[name=logo-googleplus]:hover {
    color: #dd4b39;
}
ion-icon[name=logo-instagram]:hover {
    color: #517fa4;
}


footer div:last-child p {
    text-align: center;
    color: #888888;
    margin-top: 30px;
}



/* ---------------------------------------------- */
/* ANIMATIONS */
/* ---------------------------------------------- */
.js-wp-1,
.js-wp-2,
.js-wp-3 {
    opacity: 0;
    animation-duration: 1s;
}
.js-wp-1.animated,
.js-wp-2.animated,
.js-wp-3.animated {
    opacity: 1;
}

.js-wp-4 {
    animation-duration: 1s;
}